<template>
  <div class="body">
    <NavbarTurn @func="getMsgFormSon" @func1="getMsgFormSon1" @func2="getMsgFormSon2"></NavbarTurn>
    <div :style="{marginTop: (msgFormSon+msgFormSon1+5)+ 'px'}">
      <div class="painter_pic">
        <img
          class="painter_pic"
          :src="painter.painterImage"
        >
      </div>
      <div class="painter_info">
        <div style="display: flex;flex-direction: row;position: relative">
          <div class="divaaa">
            <p class="name">{{painter.painterName}}</p>
            <p class="job">{{painter.painterOccupation}}</p>
          </div>
          <div class="status_div">
            <text class="status">{{painter.painterIntroduction}}</text>
          </div>
        </div>
        <div class="row1">
          <div class="div_type" v-for="(list,styleIndex) in painter.painterStyleDTOS" :key="styleIndex"
               v-if="styleIndex<2">
            <p class="type">{{list.psName}}</p>
          </div>
          <div class="quantity">在售{{painter.onSaleCount}}件作品</div>
        </div>
      </div>
    </div>
    <div class="synopsis">
      <text class="title">作者简介</text>
      <div class="div_content">
        <text class="content">{{painter.painterStory}}</text>
      </div>
    </div>
    <div class="works">
      <text class="title1">在售作品</text>
      <div class="div1">
        <div class="paingting" v-for="(list,index) in book" :key="index" @click="gotoPainting(list.paintingId)">
          <div class="rightullidiv">
            <img
              mode="aspectFit"
              :src="list.imageUrlList[0]"
              alt=""
              class="rightulliimg"
            >
          </div>
          <div class="isSale" v-if="list.isSole === 1">
            <text class="sale-text">该作品已售出</text>
          </div>
          <div class="undertone-white">
            <text class="title2">{{list.paintingName}}</text>
            <text class="price">¥{{list.paintingPrice}}</text>
            <div class="content-div">
              <text class="content1">{{list.paintingInfo}}</text>
            </div>
            <div class="desc1">抢购倒计时</div>
            <div class="desc2">
              <div class="desc">
                <div class="figure-text1" v-if="list.countDown !== '已结束' && list.countDown !=='未开始'">
                  <p style="color: white;margin-left: 3px">{{list.anumber}}</p>
                </div>
                <div class="figure-text3" v-if="list.countDown !== '已结束' && list.countDown !=='未开始'">
                  <p style="color: white;margin-left: 3px">{{list.anumber1}}</p>
                </div>
                <text class="mid-text2" v-if="list.countDown !== '已结束' && list.countDown !=='未开始'">:</text>
                <div class="figure-text2" v-if="list.countDown !== '已结束' && list.countDown !=='未开始'">
                  <p style="color: white;margin-left: 3px">{{list.anumber2}}</p>
                </div>
                <div class="figure-text3" v-if="list.countDown !== '已结束' && list.countDown !=='未开始'">
                  <p style="color: white;margin-left: 3px">{{list.anumber3}}</p>
                </div>
              </div>
              <div class="countdown-text1">
                <text class="djs1" v-if="list.countDown === '已结束' || list.countDown ==='未开始'">{{list.countDown}}
                </text>
              </div>
            </div>
            <div class="row">
              <div class="style-div" v-for="(item,placeIndex) in list.paintingStyleDTOS" :key="placeIndex"
                   v-if="placeIndex<3">
                <text class="style">{{item.pgsName}}</text>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import NavbarTurn from "../../components/narbarTurn";

  export default {
    components: {
      NavbarTurn,
    },
    data() {
      return {
        painter: {

        },
        book: [
        ],
        msgFormSon: '',
        msgFormSon1: '',
        painterId: '',
        count: 0,
      }
    },
    onLoad(options) {
      this.painterId = options.painterId;
      console.log(this.painterId);
      this.getPainter();
      this.getPainting();
      wx.showShareMenu({
        withShareTicket: true
      })
    },

    created() {
      setInterval(this.timer, 1000);
    },

    mounted() {

    },
    methods: {
      getMsgFormSon(data) {
        this.msgFormSon = data;
      },
      getMsgFormSon1(data) {
        this.msgFormSon1 = data;
      },
      timer: function () {
        for (let i in this.book) {
          let open_str = (this.book[i].gmtOpen).replace(/-/g, "/");
          let openTime = new Date(open_str);
          let nowTime = new Date();
          let end_str = (this.book[i].gmtEnd).replace(/-/g, "/");
          let endTime = new Date(end_str);
          let t = endTime.getTime() - nowTime.getTime();
          let t1 = nowTime.getTime() - openTime.getTime();
          if (t1 < 0) {
            this.book[i].countDown = '未开始'
          } else if (t > 0 && t1 > 0) {
            //let day = Math.floor(t / 86400000);
            let hour = Math.floor((t / 3600000));
            let min = Math.floor((t / 60000) % 60);
            //let sec = Math.floor((t / 1000) % 60);
            hour = hour < 10 ? "0" + hour : hour;
            min = min < 10 ? "0" + min : min;
            //sec = sec < 10 ? "0" + sec : sec;
            let format = '';
            if (hour >= 100) {
              format = ` 99ㅤ59 `;
            } else if (hour > 0 && hour < 100) {
              format = ` ${hour} ${min} `;
            } else if (hour <= 0) {
              format = ` 00ㅤ${min} `;
            }
            this.book[i].countDown = format;
            this.cutdown = Array(hour);
            this.book[i]['anumber'] = parseInt(this.cutdown.length / 10);
            this.book[i]['anumber1'] = parseInt(this.cutdown.length % 10);
            this.cutdown1 = Array(min);
            this.book[i]['anumber2'] = parseInt(this.cutdown1.length / 10);
            this.book[i]['anumber3'] = parseInt(this.cutdown1.length % 10);
          } else {
            this.book[i].countDown = '已结束';
          }
        }
      },

      getPainter() {
        console.log(this.painterId)
        this.$request.post({
            url: '/api/painter/query4Mobile',
            data: {
              'painterId': this.painterId,
              'painterName': ''
            }
          }
        ).then(res => {
          if (res[0].painterIntroduction === ''||res[0].painterIntroduction===null) {
            res[0].painterIntroduction = '快速升值中'
          }
          this.painter = res[0];
          console.log(this.painter);
          console.log(this.painter.painterName)
        })
      },
      getPainting() {
        this.$request.post({
          url: '/api/painting/queryUnSalePainting',
          data: {
            "painterId": this.painterId
          }
        }).then(res => {
          for (let i = 0; i < res.length; i++) {
            if (res[i].paintingInfo == null) {
              res[i].paintingInfo = '暂无介绍'
            }
          }
          this.book = res;
          this.count = res.length;
        })
      },
      gotoPainting(paintingId) {
        const url = '/pages/productDetail/main?paintingId=' + paintingId;
        const pages = getCurrentPages();
        if(pages.length === 10){
          wx.redirectTo({url});
        }
        else{
          wx.navigateTo({url});
        }
      },
    },
  }
</script>

<style scoped>
  .body {
    background: rgba(247, 247, 247, 1);
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .painter_pic {
    width: 375px;
    height: 375px;
  }

  .painter_info {
    /*width: 375px;*/
    /*height: 82px;*/
    background-color: rgba(255, 255, 255, 1);
    padding-left: 16px;
    padding-top: 20px;
    padding-bottom: 16px;
  }

  .name {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(47, 49, 51, 1);
    line-height: 22px;
  }

  .job {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(114, 117, 121, 1);
    line-height: 17px;
    margin-left: 8px;
    margin-top: 5px;
  }

  .status {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(114, 117, 121, 1);
    line-height: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .type {
    font-size: 11px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(144, 42, 38, 1);
    line-height: 22px;
    margin-left: 5px;
  }

  .quantity {
    left: 265px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(114, 117, 121, 1);
    line-height: 17px;
    position: absolute;
  }

  .div_type {
    width: 85px;
    height: 22px;
    border: 1px solid rgba(144, 42, 38, 1);
    text-align: center;
    display: flex;
    flex-direction: row;
    margin-right: 5px;
  }

  .synopsis {
    margin-top: 11px;
    width: 375px;
    height: 200px;
    background: rgba(255, 255, 255, 1);
    display: flex;
    text-align: center;
    flex-direction: column;
  }

  .title {
    margin-top: 8px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 20px;
  }

  .div_content {
    margin-top: 16px;
    margin-left: 20px;
    width: 335px;
    height: 130px;
    overflow: scroll;
  }

  .content1 {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 20px;
  }

  .works {
    margin-top: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 1);
  }

  .title1 {
    margin-top: 24px;
    margin-left: 160px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 20px;
  }

  .paingting {
    margin-bottom: 8px;
  }

  .div1 {
    margin-top: 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgb(244, 246, 248);
  }

  .rightullidiv {
    width: 375px;
    height: 160px;
    background-color: rgba(236, 238, 240, 1);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .rightulliimg {
    /*background-size:contain;*/
    width: 100%;
    height: 100%;
  }

  .undertone-white {
    width: 375px;
    height: 170px;
    background-color: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
  }

  .title2 {
    margin-top: 10px;
    margin-left: 12px;
    font-size: 16px;
    font-weight: 700;
    color: rgba(47, 49, 51, 1);
    line-height: 22px;
  }

  .price {
    margin-top: 8px;
    margin-left: 12px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(225, 140, 30, 1);
    line-height: 25px;
  }

  .content-div {
    margin-left: 12px;
    margin-top: 10px;
    height: 43px;
    width: 351px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .content {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(114, 117, 121, 1);
    line-height: 17px;
  }

  .row {
    margin-top: -53px;
    display: flex;
    flex-direction: row;
    padding-bottom:5px;
  }

  .style-div {
    margin-top: 12px;
    margin-left: 12px;
    width: 52px;
    height: 24px;
    border: 1px solid rgba(144, 42, 38, 1);
    text-align: center;
  }

  .style {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(144, 42, 38, 1);
    line-height: 24px;
  }

  .desc {
    display: flex;
    flex-direction: row;
    height: 30px;
  }

  .desc1 {
    margin-top: 20px;
    margin-left: 200px;
    width: 100px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 20px;
  }

  .desc2 {
    margin-top: -12px;
    margin-left: 210px;
    display: flex;
    flex-direction: row;
  }

  .figure-text1 {
    margin-top: -10px;
    margin-left: 63px;
    width: 15px;
    height: 25px;
    background: rgba(217, 49, 42, 1);
  }

  .figure-text3 {
    margin-top: -10px;
    margin-left: 3px;
    width: 15px;
    height: 25px;
    background: rgba(217, 49, 42, 1);
  }

  .figure-text2 {
    margin-top: -10px;
    margin-left: 15px;
    width: 15px;
    height: 25px;
    background: rgba(217, 49, 42, 1);
  }



  .djs1 {
    font-size: 15px;
    font-weight: 400;
    color: rgb(255, 5, 17);
  }

  .countdown-text1 {
    margin-top: -9px;
    margin-left: 66px;
  }

  .mid-text2 {
    margin-left: 8px;
    height: 30px;
    margin-top: -10px;
  }
  .isSale {
    position: absolute;
    margin-top: -26px;
    width: 375px;
    height: 26px;
    background: rgba(144, 42, 38, 1);
    text-align: center;
    z-index: 10;
  }

  .sale-text {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 18px;
  }

  .row1 {
    display: flex;
    flex-direction: row;
    margin-top: 16px;
    position: relative;
  }

  .status_div {
    position: absolute;
    margin-left: 275px;
  }

  .divaaa {
    display: flex;
    flex-direction: row;
  }
</style>
